<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons type="left" size="24" color="#fff" class="back-icon" @click="handleBack"></uni-icons>
      <text class="nav-title">个人中心</text>
    </view>

    <!-- 主体内容：简化三栏布局 -->
    <view class="main-content">
      <!-- 左侧：个人资料展示 -->
      <view class="module left-module">
        <text class="module-title">我的资料</text>
        
        <!-- 头像与名称 -->
        <view class="profile-header">
          <view class="avatar">
            <uni-icons type="person" size="60" color="#fff"></uni-icons>
          </view>
          <view class="profile-name">{{ userInfo.name }}</view>
          <view class="edit-btn" @click="showEditPopup = true">编辑资料</view>
        </view>

        <!-- 基础信息列表 -->
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">账号ID</text>
            <text class="info-value">{{ userInfo.id }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">手机号</text>
            <text class="info-value">{{ userInfo.phone }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">性别</text>
            <text class="info-value">{{ userInfo.gender }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">年龄</text>
            <text class="info-value">{{ userInfo.age }}岁</text>
          </view>
          <view class="info-item">
            <text class="info-label">实名认证</text>
            <text class="info-value" :class="userInfo.certified ? 'certified' : 'uncertified'">
              {{ userInfo.certified ? '已认证' : '未认证' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 中间：我的服务入口 -->
      <view class="module center-module">
        <text class="module-title">我的服务</text>
        
        <!-- 服务列表（简化为4个核心入口） -->
        <view class="service-list">
          <view class="service-item" @click="gotoPage('我的订单')">
            <view class="service-icon blue-icon">
              <uni-icons type="order" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">我的订单</text>
          </view>
          <view class="service-item" @click="gotoPage('我的问诊')">
            <view class="service-icon green-icon">
              <uni-icons type="chatbubble" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">我的问诊</text>
          </view>
          <view class="service-item" @click="gotoPage('我的报告')">
            <view class="service-icon blue-icon">
              <uni-icons type="file-text" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">我的报告</text>
          </view>
          <view class="service-item" @click="gotoPage('我的优惠券')">
            <view class="service-icon green-icon">
              <uni-icons type="ticket" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">我的优惠券</text>
          </view>
        </view>
      </view>

      <!-- 右侧：设置与退出 -->
      <view class="module right-module">
        <text class="module-title">账户设置</text>
        
        <!-- 基础设置项 -->
        <view class="setting-list">
          <!-- <view class="setting-item">
            <text class="setting-name">消息通知</text>
            <uni-switch v-model="settingInfo.notification"></uni-switch>
          </view> -->
          <view class="setting-item" @click="clearCache">
            <text class="setting-name">清除缓存</text>
            <text class="cache-size">{{ settingInfo.cacheSize }}</text>
          </view>
          <view class="setting-item" @click="gotoPage('帮助中心')">
            <text class="setting-name">帮助中心</text>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-btn" @click="confirmLogout">
          <uni-icons type="logout" size="18" color="#e74c3c"></uni-icons>
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </view>

    <!-- 编辑资料弹窗（简化版） -->
    <uni-popup v-model="showEditPopup" type="center" :mask-click="false">
      <view class="edit-popup">
        <view class="popup-header">
          <text class="popup-title">编辑个人资料</text>
          <uni-icons type="close" size="20" color="#666" @click="showEditPopup = false"></uni-icons>
        </view>
        
        <view class="popup-content">
          <view class="edit-item">
            <text class="edit-label">姓名</text>
            <input class="edit-input" v-model="editForm.name" placeholder="请输入姓名">
          </view>
          <view class="edit-item">
            <text class="edit-label">手机号</text>
            <input class="edit-input" type="number" v-model="editForm.phone" placeholder="请输入手机号" maxlength="11">
          </view>
          <view class="edit-item">
            <text class="edit-label">性别</text>
            <view class="gender-options">
              <view class="gender-option" :class="{ active: editForm.gender === '男' }" @click="editForm.gender = '男'">男</view>
              <view class="gender-option" :class="{ active: editForm.gender === '女' }" @click="editForm.gender = '女'">女</view>
            </view>
          </view>
        </view>
        
        <view class="popup-footer">
          <view class="footer-btn cancel-btn" @click="showEditPopup = false">取消</view>
          <view class="footer-btn confirm-btn" @click="saveEdit">确认保存</view>
        </view>
      </view>
    </uni-popup>
	<tabBar></tabBar>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 1. 基础数据（简化核心字段）
const userInfo = ref({
  name: '用户10086',
  id: '100861122',
  phone: '138****8888',
  gender: '男',
  age: 30,
  certified: true // 实名认证状态
});

// 2. 设置数据
const settingInfo = ref({
  notification: true, // 消息通知开关
  cacheSize: '2.1MB'  // 缓存大小
});

// 3. 编辑弹窗相关
const showEditPopup = ref(false);
const editForm = ref({
  name: userInfo.value.name,
  phone: userInfo.value.phone,
  gender: userInfo.value.gender
});

// 4. 导航返回
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 5. 页面跳转（简化提示，实际项目替换为真实路径）
const gotoPage = (pageName) => {
  uni.showToast({ title: `前往${pageName}页面`, icon: 'none' });
  // 实际项目中替换为：
  // uni.navigateTo({ url: `/pages/mine/${pageName.toLowerCase().replace('我的', '')}` });
};

// 6. 保存编辑资料
const saveEdit = () => {
  // 更新用户信息
  userInfo.value.name = editForm.value.name;
  userInfo.value.phone = editForm.value.phone;
  userInfo.value.gender = editForm.value.gender;
  
  // 关闭弹窗+提示
  showEditPopup.value = false;
  uni.showToast({ title: '资料修改成功', icon: 'success' });
};

// 7. 清除缓存
const clearCache = () => {
  settingInfo.value.cacheSize = '0KB';
  uni.showToast({ title: '缓存已清除', icon: 'success' });
};

// 8. 退出登录
const confirmLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '退出后需重新登录，是否继续？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中添加退出登录逻辑（如清除token）
        uni.showToast({ title: '已退出登录' });
        // 跳转登录页
        uni.redirectTo({ url: '/pages/login' });
      }
    }
  });
};
</script>

<style scoped>
/* 全局容器：等距风格背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.back-icon {
  cursor: pointer;
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 主体内容：三栏布局 */
.main-content {
  display: flex;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：个人资料样式 */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.profile-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.edit-btn {
  font-size: 14px;
  color: #6b7fd7;
  background-color: #f0f2fa;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-label {
  font-size: 14px;
  color: #666;
  width: 80px;
}

.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.certified {
  color: #45b787;
}

.uncertified {
  color: #f59a23;
}

/* 中间：服务列表样式 */
.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.service-item {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.1);
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.blue-icon {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
}

.green-icon {
  background: linear-gradient(135deg, #5bd1a3, #45b787);
}

.service-name {
  font-size: 14px;
  color: #333;
}

/* 右侧：设置与退出样式 */
.setting-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.setting-name {
  font-size: 14px;
  color: #333;
}

.cache-size {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fef2f2;
  color: #e74c3c;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}

.logout-text {
  margin-left: 8px;
  font-size: 14px;
}

/* 编辑弹窗样式 */
.edit-popup {
  width: 90%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.edit-item {
  display: flex;
  flex-direction: column;
}

.edit-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.edit-input {
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
}

.gender-options {
  display: flex;
  gap: 15px;
}

.gender-option {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  cursor: pointer;
}

.gender-option.active {
  border-color: #6b7fd7;
  color: #6b7fd7;
  background-color: #f0f2fa;
}

.popup-footer {
  display: flex;
  gap: 10px;
}

.footer-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

/* 响应式：手机端改为纵向布局 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
}
</style>